<template>
  <div class="zc">
    <div class="zc-a">
      <img
        src="https://img.youpin.mi-img.com/jianyu/efaf252fb1ef07bb22395bc3649a127d.png?w=1053&amp;h=180"
      />
      <div class="zc-aa">
        <span>小米有品众筹</span>
        <div>
          <span class="more">更多</span>
          <img
            src=""
            style="display:block;margin-right:0.18rem"
          />
        </div>
      </div>
    </div>
    <div
      class="zc-t"
      style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; align-content: flex-start; flex-shrink: 0; width: 100%; padding-left: 0.09rem; padding-right: 0.09rem;"
    >
      <div style=" position: relative; box-sizing: border-box; display: flex;  flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 2rem; height: 1.26rem;">
        <div style=" position: relative; box-sizing: border-box; display: flex;  flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 2.01rem; height: 1.08rem;">
          <span style="white-space: pre-wrap;  position: relative; box-sizing: border-box; display: -webkit-box;  flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0.15rem; margin-top: 0.04rem; color: rgb(51, 51, 51); text-overflow: ellipsis; -webkit-line-clamp: 2; overflow: hidden;">石墨烯智能护腰带</span>
          <div style=" position: relative; box-sizing: border-box; display: flex;  flex-direction: column; place-content: flex-start center; flex-shrink: 0; height: 0.16rem; -webkit-box-pack: center; -webkit-box-align: center; align-items: center;">
            <span style="white-space: nowrap; border: 0.005rem solid rgb(245, 235, 209); position: relative; box-sizing: border-box; display: block;  flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0.11rem; color: rgb(125, 68, 2); text-overflow: ellipsis; padding-left: 0.04rem; padding-right: 0.04rem; margin-top: 0,05rem; background-color: rgb(255, 249, 227); max-width: 2.05rem; align-self: flex-start; border-radius: 0,02rem; overflow: hidden;"
            >IOT智能化|液晶数显|无级控温|轻薄便携</span>
          </div>
          <p
            style="margin-top: -0.7rem; height: 0.2rem; -webkit-box-orient: horizontal; flex-direction: row; -webkit-box-align: end; align-items: flex-end;"
          >
            <span style="font-size: 0.1rem; color: rgb(254, 31, 29); font-weight: bold;">¥</span>
            <span style="font-size: 0.14rem; color: rgb(254, 31, 29); font-weight: bold;">119</span>
            <span style="font-size: 0.1rem; color: rgb(254, 31, 29); font-weight: bold;">起</span>
          </p>
        </div>
        <div
          style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; place-content: flex-start space-between; flex-shrink: 0; -webkit-box-pack: justify; font-size: 0.12rem; margin-top: 0.05rem;"
        >
          <div
            style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; align-content: flex-start; flex-shrink: 0; -webkit-box-align: center; align-items: center; height: 0.12rem;"
          >
            <img
              src="https://img.youpin.mi-img.com/youpinoper/a76c2e68d4bcff4878941a61977e805a.png"
              style="display: flex; width: 0.18rem; height: 0.18rem; border-radius: 0.02rem; padding-left: 0.01rem; padding-right: 0.01rem; line-height: 0.18rem; color: rgb(255, 255, 255); font-size: 0.09rem; text-align: center; margin-right: 0.03rem;"
            />
            <span
              style="white-space: pre-wrap;  position: relative; box-sizing: border-box; display: block;  flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0.1rem; color: rgb(51, 51, 51); line-height: 0.14rem; margin-right: 0.03rem;"
            >支持人数</span>
            <span
              style="white-space: pre-wrap;  position: relative; box-sizing: border-box; display: block;  flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0.1rem; color: rgb(238, 136, 66); line-height: 0.1rem;"
            >1.23万</span>
            <span
              style="white-space: pre-wrap;  position: relative; box-sizing: border-box; display: block;  flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0.1rem; color: rgb(51, 51, 51); line-height: 0.14rem; margin-right: 0.05rem; margin-left: 0.05rem;"
            >/</span>
            <span
              style="white-space: pre-wrap;  position: relative; box-sizing: border-box; display: block;  flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0.1rem; color: rgb(51, 51, 51); line-height: 0.14rem; margin-right: 0.03rem;"
            >完成度</span>
            <span
              style="white-space: pre-wrap;  position: relative; box-sizing: border-box; display: block;  flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0.1rem; color: rgb(238, 136, 66); line-height: 0.1rem; margin-right: 0.03rem;"
            >140%</span>
          </div>
        </div>
      </div>
      <div
        style=" position: relative; box-sizing: border-box; display: flex;  flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 1.32rem; height: 1.32rem;"
      >
        <div
          style=" position: relative; box-sizing: border-box; display: flex;  flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 1.32rem; height: 1.32rem; background-color: transparent;"
        >
          <img
            src="https://img.youpin.mi-img.com/shopmain/339dccc830ba0f5bb0ccb836d362240e.png@base@tag=imgScale&amp;h=264&amp;w=264"
            style="display: flex; width: 1.32rem; height: 1.32rem; opacity: 1;"
          />
        </div>
      </div>
    </div>
    <div style="position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; margin-top: 0.02rem; height: 0.04rem; overflow: hidden; width: 3.33rem; background-color: rgb(225, 225, 225); margin-left: 0.09rem; border-radius: 0.02rem;">
      <div style="position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 3.33rem; height: 0.04rem; background-image: linear-gradient(to right, rgb(255, 200, 102), rgb(255, 88, 27)); border-radius: 0.02rem; overflow: hidden;"></div>
      
    </div>
    <!-- ------------------- -->
    <div style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; cursor: pointer; width: 1.59rem; height: 1.22rem;margin-left:0.1rem;margin-top:0.1rem">
      <div style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 1.59rem;">
        <span style="white-space: nowrap;  position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0.13rem; color: rgb(51, 51, 51); text-overflow: ellipsis; line-height: 0.18rem; overflow: hidden;">热敷拉伸护颈枕</span>
        <div style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; align-content: flex-start; flex: 1 1 0%; -webkit-box-flex: 1; height: 0.8rem;">
          <div style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex: 1 1 0%; -webkit-box-flex: 1; height: 0.8rem;">
            <p style="margin-top: 0.05rem; -webkit-box-orient: horizontal; flex-direction: row; -webkit-box-align: end; align-items: flex-end; width: 0.84rem; height: 0.2rem;">
              <span style="color: rgb(254, 31, 29); font-size: 0.1rem; font-weight: bold; display:block">¥99</span>
            </p>
            <div style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; align-content: flex-start; flex-shrink: 0; margin-top: 0.47rem; font-size: 0.12rem;">
              <div
                style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; align-content: flex-start; flex-shrink: 0; -webkit-box-align: center; align-items: center; height: 0.12rem;"
              >
                <img
                  fallbacksource="[object Object]"
                  src="https://img.youpin.mi-img.com/youpinoper/a76c2e68d4bcff4878941a61977e805a.png"
                  style="display: flex; width: 0.18rem; height: 0.18rem; border-radius: 0.02rem; padding-left: 0.01rem; padding-right: 0.01rem; line-height: 0.18rem; color: rgb(255, 255, 255); font-size: 0,09rem; text-align: center; margin-right: 0.03rem;"
                />
                <span
                  style="white-space: pre-wrap;  position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0,1rem; color: rgb(51, 51, 51); line-height: 10.04rem; margin-right: 0.02rem;"
                >支持人数</span>
                <span
                  style="white-space: pre-wrap;  position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0.1rem; color: rgb(238, 136, 66); line-height: 0.1rem;"
                >1.22万</span>
              </div>
            </div>
          </div>
          <div
            style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 0.75rem; height: 0.75rem; margin-top: 0.07rem;"
          >
            <div
              style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 0.75rem; height: 0.75rem; background-color: transparent;"
            >
              <!-- empty -->
              <img
                resizemode="contain"
                fallbacksource="[object Object]"
                src="https://img.youpin.mi-img.com/shopmain/711eb51153be31b825b949192268c1e9.png@base@tag=imgScale&amp;h=150&amp;w=150"
                style="display: flex; width: 0.75rem; height: 0.75rem; opacity: 1; object-fit: contain;"
              />
            </div>
          </div>
        </div>
      </div>
      <div
        style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0;"
      >
        <div
          style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; margin-top: 0.06rem; height: 0.04rem; overflow: hidden; background-color: rgb(225, 225, 225); border-radius: 0.02rem;"
        >
          <div
            style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 1.59rem; height: 0.04rem; background-image: linear-gradient(to right, rgb(255, 200, 102), rgb(255, 88, 27)); border-radius: 0.02rem; overflow: hidden;"
          ></div>
        </div>
      </div>
      
      
    </div>

    <!-- ---------------------------- -->
    <div style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; cursor: pointer; width: 1.59rem; height: 1.22rem;margin-left:1.9rem;margin-top:-1.22rem">
      <div style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 1.59rem;">
        <span style="white-space: nowrap;  position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0.13rem; color: rgb(51, 51, 51); text-overflow: ellipsis; line-height: 0.18rem; overflow: hidden;">智能恒温水暖垫</span>
        <div style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; align-content: flex-start; flex: 1 1 0%; -webkit-box-flex: 1; height: 0.8rem;">
          <div style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex: 1 1 0%; -webkit-box-flex: 1; height: 0.8rem;">
            <p style="margin-top: 0.05rem; -webkit-box-orient: horizontal; flex-direction: row; -webkit-box-align: end; align-items: flex-end; width: 0.84rem; height: 0.2rem;">
              <span style="color: rgb(254, 31, 29); font-size: 0.1rem; font-weight: bold; display:block">¥399</span>
            </p>
            <div style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; align-content: flex-start; flex-shrink: 0; margin-top: 0.47rem; font-size: 0.12rem;">
              <div
                style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: horizontal; flex-direction: row; align-content: flex-start; flex-shrink: 0; -webkit-box-align: center; align-items: center; height: 0.12rem;"
              >
                <img
                  fallbacksource="[object Object]"
                  src="https://img.youpin.mi-img.com/youpinoper/a76c2e68d4bcff4878941a61977e805a.png"
                  style="display: flex; width: 0.18rem; height: 0.18rem; border-radius: 0.02rem; padding-left: 0.01rem; padding-right: 0.01rem; line-height: 0.18rem; color: rgb(255, 255, 255); font-size: 0,09rem; text-align: center; margin-right: 0.03rem;"
                />
                <span
                  style="white-space: pre-wrap;  position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0,1rem; color: rgb(51, 51, 51); line-height: 10.04rem; margin-right: 0.02rem;"
                >支持人数</span>
                <span
                  style="white-space: pre-wrap;  position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 0.1rem; color: rgb(238, 136, 66); line-height: 0.1rem;"
                >9847</span>
              </div>
            </div>
          </div>
          <div
            style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 0.75rem; height: 0.75rem; margin-top: 0.07rem;"
          >
            <div
              style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 0.75rem; height: 0.75rem; background-color: transparent;"
            >
              <!-- empty -->
              <img
                resizemode="contain"
                fallbacksource="[object Object]"
                src="https://img.youpin.mi-img.com/shopmain/2c69926e1ce889af2831d3c4705cfefd.png@base@tag=imgScale&h=150&w=150"
                style="display: flex; width: 0.75rem; height: 0.75rem; opacity: 1; object-fit: contain;"
              />
            </div>
          </div>
        </div>
      </div>
      <div
        style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0;"
      >
        <div
          style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; margin-top: 0.06rem; height: 0.04rem; overflow: hidden; background-color: rgb(225, 225, 225); border-radius: 0.02rem;"
        >
          <div
            style=" position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 1.59rem; height: 0.04rem; background-image: linear-gradient(to right, rgb(255, 200, 102), rgb(255, 88, 27)); border-radius: 0.02rem; overflow: hidden;"
          ></div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.zc {
  position: relative;
  box-sizing: border-box;
  display: flex;

  flex-direction: column;
  align-content: flex-start;
  flex-shrink: 0;
  margin-left: 0.14rem;
}
.zc-a img:nth-child(1) {
  display: flex;
  width: 100%;
  height: 0.6rem;
  border-top-left-radius: 0.06rem;
  border-top-right-radius: 0.06rem;
  left: 0;
  top: 0;
  overflow: hidden;
  position: absolute;
  object-fit: cover;
}
.zc-aa {
  position: relative;
  box-sizing: border-box;
  display: flex;
  -webkit-box-orient: horizontal;
  flex-direction: row;
  place-content: flex-start;
  flex-shrink: 0;
}
.zc-aa div {
  position: relative;
  box-sizing: border-box;
  display: flex;
  -webkit-box-orient: horizontal;
  flex-direction: row;
  align-content: flex-start;
  flex-shrink: 0;
  -webkit-box-align: center;
  align-items: center;
}
.zc-aa span {
  white-space: nowrap;

  position: relative;
  box-sizing: border-box;
  display: block;

  flex-direction: column;
  align-content: flex-start;
  flex: 3 1 0%;
  font-size: 0.18rem;
  -webkit-box-flex: 3;
  font-weight: bold;
  color: rgb(51, 51, 51);
  margin-left: 0.08rem;
  overflow: hidden;
}

.zc-aa .more {
  flex-shrink: 0;
  font-size: 0.12rem;
  line-height: 0.43rem;
  color: rgb(153, 153, 153);
  padding-top: 0.01rem;
  text-align: center;
}
</style>